<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>浏览器唤起APP</title>
  </head>
  <body>
    <h3>浏览器唤起APP</h3>
    <hr />
    <button class="scheme">Scheme唤起APP</button>
    <hr />
    <a class="a">a标签唤起APP</a>
    <hr />
    <ul>
      <li>
        1.为什么需要浏览器唤起APP?
        <p>有一些功能在H5不支持,只能去APP才能完成</p>
      </li>
      <li>
        2.浏览器是如何唤起APP?
        <p>浏览器唤起APP的方式有很多</p>
        <ol>
          <li>
            使用通用链接
            <p>通用链接是苹果在IOS9推出方便支持启动APP的功能</p>
            <p>通用链接是通过标准的http/https协议链接唤起App</p>
            <div>
              优缺点：
              <p>
                优点：提供极佳的用户体验，使用起来也非常方便，解决了同时唤起 app
                跟 app store 的问题
              </p>
              <p>
                缺点：只有在 ios 9
                版本之上才能使用，个别浏览器不支持有兼容性问题
              </p>
            </div>
          </li>
          <li>
            使用URL Scheme协议
            <p>[scheme:][//host:port][path][?query][#fragment]</p>
            <div>
              优缺点：
              <p>优点:1. 兼容性好，大部分机型都能兼容 2. 使用方便</p>
              <p>
                缺点： 1. 不能判断是否已经下载了 app,需要自己写逻辑判断 2.
                用户体验不如通用链接的方式。
              </p>
            </div>
          </li>
          <li>
            使用a 标签跟 iframe标签
            <p>这两种方式都是通过创建元素，通过元素属性的特性来做的</p>
            <div>
              优缺点：
              <p>优点：在个别场景中如果发现唤起 app 有问题，可以尝试这两种。</p>
              <p>
                缺点： iframe
                基本上已经被废弃了,a标签测试结果只在个别机型中可用。
              </p>
            </div>
          </li>
        </ol>
      </li>
    </ul>
    <hr />
    <p>对于浏览器来说，兼容性是必不可少的一环</p>

    <ol>
      <h3>Android</h3>
      <li>
        Chrome内核无法通过iframe方式来调用scheme,而通过a链接的方式可以成功调用
      </li>
      <li>微信内置浏览器无法通过任何方式打开APP,除非进入白名单</li>
    </ol>

    <ol>
      <h3>ios</h3>
      <li>
        Safari浏览器不支持
        iframe可直接做页面跳转;对于UC、Chrome、QQ只能通过a链接方式调用scheme
      </li>
      <li>IOS9+可以使用通用链接在微信内置浏览器中打开APP</li>
    </ol>
  </body>
  <script>
    const schemeBtn = document.querySelector(".scheme");
    const aBtn = document.querySelector(".a");

    // 获取用户设备型号
    console.log(navigator);
    const u = navigator.userAgent;
    console.log(u);
    // 判断设备
    // 安卓端
    const isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
    // 苹果端
    const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    // 下载地址
    const downLoadHref = "https://live.qq.com/api/douyu";
    // scheme 地址
    const scheme = "douyutv://";

    let currenBrowser;

    // 判断浏览器
    //判断是否Safari浏览器
    if (u.indexOf("Safari") > -1) {
      console.log("Safari");
      currenBrowser = "Safari";
    }
    //判断是否Opera浏览器
    if (u.indexOf("Opera") > -1) {
      console.log("Opera");
      currenBrowser = "Opera";
    }
    //判断是否Firefox浏览器
    if (u.indexOf("Firefox") > -1) {
      currenBrowser = "Firefox";
    }
    //判断是否chorme浏览器
    if (u.indexOf("Chrome") > -1) {
      console.log("Chrome");
      currenBrowser = "Chrome";
    }
    //判断是否IE浏览器
    if (u.indexOf("compatible") > -1 && u.indexOf("MSIE") > -1) {
      console.log("IE");
      currenBrowser = "IE";
    }
    //判断是否Edge浏览器
    if (u.indexOf("Trident") > -1) {
      console.log("Edge");
      currenBrowser = "Edge";
    }

    let hidden;

    // Url Scheme 协议 跳转
    schemeBtn.onclick = () => {
      if (isAndroid) {
        location.href = scheme;
        notJump();
      } else if (isIOS) {
        //
      }
    };

    // a标签跳转
    aBtn.onclick = () => {
      console.log(aBtn);
      aBtn.href = scheme;
      notJump(aBtn.href);
    };

    // 未跳转至APP执行的函数;
    function notJump(url = location.href) {
      hidden = document.hidden;
      if (!hidden) {
        url = downLoadHref;
      }
    }
  </script>
</html>
